﻿<!DOCTYPE html>
<!--[if IE]><![endif]-->
<html>
  
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <title>Introduction to REST API Documentation | DocFX website </title>
    <meta name="viewport" content="width=device-width">
    <meta name="title" content="Introduction to REST API Documentation | DocFX website ">
    <meta name="generator" content="docfx 2.37.0.0">
    
    <link rel="shortcut icon" href="../favicon.ico">
    <link rel="stylesheet" href="../styles/docfx.vendor.css">
    <link rel="stylesheet" href="../styles/docfx.css">
    <link rel="stylesheet" href="../styles/main.css">
    <meta property="docfx:navrel" content="../toc.html">
    <meta property="docfx:tocrel" content="toc.html">
    
    <meta property="docfx:rel" content="../">
    
  </head>
  <body data-spy="scroll" data-target="#affix" data-offset="120">
    <div id="wrapper">
      <header>
        
        <nav id="autocollapse" class="navbar navbar-inverse ng-scope" role="navigation">
          <div class="container">
            <div class="navbar-header">
              <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
                <span class="sr-only">Toggle navigation</span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
                <span class="icon-bar"></span>
              </button>
              
              <a class="navbar-brand" href="../index.html">
                <img id="logo" class="svg" src="../logo.svg" alt="">
              </a>
            </div>
            <div class="collapse navbar-collapse" id="navbar">
              <form class="navbar-form navbar-right" role="search" id="search">
                <div class="form-group">
                  <input type="text" class="form-control" id="search-query" placeholder="Search" autocomplete="off">
                </div>
              </form>
            </div>
          </div>
        </nav>
        
        <div class="subnav navbar navbar-default">
          <div class="container hide-when-search" id="breadcrumb">
            <ul class="breadcrumb">
              <li></li>
            </ul>
          </div>
        </div>
      </header>
      <div class="container body-content">
        
        <div id="search-results">
          <div class="search-list"></div>
          <div class="sr-items">
            <p><i class="glyphicon glyphicon-refresh index-loading"></i></p>
          </div>
          <ul id="pagination"></ul>
        </div>
      </div>
      <div role="main" class="container body-content hide-when-search">
        
        <div class="sidenav hide-when-search">
          <a class="btn toc-toggle collapse" data-toggle="collapse" href="#sidetoggle" aria-expanded="false" aria-controls="sidetoggle">Show / Hide Table of Contents</a>
          <div class="sidetoggle collapse" id="sidetoggle">
            <div id="sidetoc"></div>
          </div>
        </div>
        <div class="article row grid-right">
          <div class="col-md-10">
            <article class="content wrap" id="_content" data-uid="">
<h1 id="introduction-to-rest-api-documentation">Introduction to REST API Documentation</h1>

<h2 id="introduction">Introduction</h2>
<p>DocFX supports generating documentation from REST APIs following <a href="http://swagger.io/specification/">Swagger specification</a> version 2.0.</p>
<p>The Swagger RESTful API files <em>MUST</em> end with <code>.json</code>.</p>
<p>One Swagger API file generates one HTML file. For example, a file <code>contacts.swagger.json</code> generates file naming <code>contacts.html</code>.</p>
<h2 id="basic-structure">Basic structure</h2>
<p>A single Swagger API file is considered as a unique REST <strong>File</strong> containing multiple <strong>API</strong>s. The <strong>UID</strong>(Unique IDentifier) for the <strong>File</strong> is defined as the combination of <code>host</code>, <code>basePath</code>, <code>info.title</code> and <code>info.version</code> with <code>/</code> as separator. For example, the following Swagger API file has <strong>UID</strong> equals to <code>microsoft.com/docfx/Contacts/1.6</code>:</p>
<pre><code class="lang-json">{
  &quot;swagger&quot;: &quot;2.0&quot;,
  &quot;info&quot;: {
    &quot;title&quot;: &quot;Contacts&quot;,
    &quot;version&quot;: &quot;1.6&quot;
  },
  &quot;host&quot;: &quot;microsoft.com&quot;,
  &quot;basePath&quot;: &quot;/docfx&quot;,
  &quot;schemes&quot;: [
    &quot;https&quot;
  ]
}
</code></pre>
<p>A REST API <strong>File</strong> contains multiple <strong>API</strong>s as its children. An <strong>API</strong> is an <a href="http://swagger.io/specification/#operationObject">Operation Object</a> defined in <a href="http://swagger.io/specification/#pathItemObject">Path Item Object</a>. The <strong>UID</strong>(Unique IDentifier) for this <strong>API</strong> is defined as the combination of the <strong>UID</strong> of the <strong>File</strong> and the <code>operationId</code> of the <a href="http://swagger.io/specification/#operationObject">Operation Object</a>. For example, the following <code>get_contacts</code> operation has <strong>UID</strong> equal to <code>microsoft.com/docfx/Contacts/1.6/get_contacts</code>:</p>
<pre><code class="lang-json">{
  &quot;swagger&quot;: &quot;2.0&quot;,
  &quot;info&quot;: {
    &quot;title&quot;: &quot;Contacts&quot;,
    &quot;version&quot;: &quot;1.6&quot;
  },
  &quot;host&quot;: &quot;microsoft.com&quot;,
  &quot;basePath&quot;: &quot;/docfx&quot;,
  &quot;schemes&quot;: [
    &quot;https&quot;
  ],
  &quot;paths&quot;: {
    &quot;/contacts&quot;: {
      &quot;get&quot;: {
        &quot;parameters&quot;: [
        ],
        &quot;responses&quot;: {
        },
        &quot;operationId&quot;: &quot;get_contacts&quot;
      }
    }
  }
}
</code></pre>
<div class="TIP">
<h5>Tip</h5>
<p>It is recommended that user provides a well-formed <code>operationId</code> name.
We suggest that the <code>operationId</code> is one word in camelCase or snake_case.</p>
</div>
<p>A REST API <strong>File</strong> could also contain multiple tags. The tag is a <a href="http://swagger.io/specification/#tagObject">Tag Object</a>, which is optional and used by <a href="http://swagger.io/specification/#operationObject">Operation Object</a>. The <strong>UID</strong>(Unique IDentifier) for this tag is defined as the combination of <strong>UID</strong> of the <strong>File</strong>, <code>tag</code>, and <code>name</code> of the <a href="http://swagger.io/specification/#tagObject">Tag Object</a>. For example, the following tag <code>Basic</code> has <strong>UID</strong> <code>microsoft.com/docfx/Contacts/1.6/tag/Basic</code>:</p>
<pre><code class="lang-json">{
  &quot;swagger&quot;: &quot;2.0&quot;,
  &quot;info&quot;: {
    &quot;title&quot;: &quot;Contacts&quot;,
    &quot;version&quot;: &quot;1.6&quot;
  },
  &quot;host&quot;: &quot;microsoft.com&quot;,
  &quot;basePath&quot;: &quot;/docfx&quot;,
  &quot;schemes&quot;: [
    &quot;https&quot;
  ],
  &quot;tags&quot;: [
    {
      &quot;name&quot;: &quot;Basic&quot;,
      &quot;description&quot;: &quot;Basic description&quot;
    },
    {
      &quot;name&quot;: &quot;Advanced&quot;,
      &quot;description&quot;: &quot;Advanced description&quot;
    }
  ]
}
</code></pre>
<h2 id="html-layout">HTML layout</h2>
<p>The generated HTML file lists all the <strong>API</strong>s inside the <strong>File</strong> in the order defined in the Swagger REST file.</p>
<p>You can use <em>Overwrite File</em>s to add more information to the <strong>File</strong> and <strong>API</strong>, and use tags to organize the sections of the <strong>API</strong>s.</p>
<h3 id="overwrite-files"><em>Overwrite File</em>s</h3>
<p><em>Overwrite File</em>s are Markdown files with multiple <em>Overwrite Section</em>s starting with YAML header block. A valid YAML header for an <em>Overwrite Section</em> <em>MUST</em> take the form of valid <a href="http://www.yaml.org/spec/1.2/spec.html">YAML</a> set between triple-dashed lines and start with property <code>uid</code>. Here is a basic example of an <em>Overwrite Section</em>:</p>
<pre><code class="lang-md">---
uid: microsoft.com/docfx/Contacts/1.6
---
Further description for `microsoft.com/docfx/Contacts/1.6`
</code></pre>
<p>The <code>uid</code> value <em>MUST</em> match the <code>uid</code> of the <strong>File</strong> or <strong>API</strong> that you want to overwrite. The content following YAML header is the additional Markdown description for the <strong>File</strong> or <strong>API</strong>. By default, it is transformed to HTML and appended below the description of the <strong>File</strong> or <strong>API</strong>.</p>
<h3 id="add-footer">Add footer</h3>
<p>You can also define the <code>footer</code> of an <strong>File</strong> or <strong>API</strong> using the following syntax:</p>
<pre><code class="lang-md">---
uid: microsoft.com/docfx/Contacts/1.6
footer: *content
---
Footer for `microsoft.com/docfx/Contacts/1.6`
</code></pre>
<p><code>*content</code> is the keyword representing the Markdown content following YAML header. The value for <code>*content</code> is always transformed from Markdown content to HTML. In the above example, the value for <code>*content</code> is <code>&lt;p&gt;Footer for &lt;code&gt;microsoft.com/docfx/Contacts/1.6&lt;/code&gt;&lt;/p&gt;</code>. In this way, the value of <code>footer</code> for <strong>API</strong> <code>microsoft.com/docfx/Contacts/1.6</code> is set to <code>&lt;p&gt;Footer for &lt;code&gt;microsoft.com/docfx/Contacts/1.6&lt;/code&gt;&lt;/p&gt;</code>. We leverage <a href="http://www.yaml.org/spec/1.2/spec.html#id2765878">Anchors</a> syntax in YAML specification for <code>*content</code>.</p>
<p>If <code>footer</code> is set, the content from <code>footer</code> will be appended to the last section of the <strong>File</strong> or <strong>API</strong>. It is usually used to define <strong>See Also</strong> or <strong>Additional Resources</strong> for the documentation.</p>
<h3 id="tags-to-organize-the-sections-of-apis">Tags to organize the sections of APIs</h3>
<p>You can organize the sections of APIs by using tags in Swagger file, following definitions in <a href="http://swagger.io/specification/#tagObject">Tag Object</a>.</p>
<p>Each API can be specified with one or multiple tags, or not speficied with any tag.</p>
<ul>
<li>If all APIs are <em>not</em> tagged, each API will not be included in any sections.</li>
<li>If the API is specified with <em>one</em> tag only, it will show inside this one tag section.</li>
<li>If the API is specified with <em>multiple</em> tags, it will show inside multiple tag sections.</li>
<li>If some APIs are specified with tags while some other APIs are not, the untagged APIs will be organized into one auto generated <code>Other apis</code> section.</li>
</ul>
<p>Specific bookmark could be added to tag section using <code>x-bookmark-id</code>, which is Swagger schema extensions following <a href="http://swagger.io/specification/#vendorExtensions">Specification Extensions</a>. If no <code>x-bookmark-id</code> is specified, <code>name</code> of the tag will be the default bookmark.</p>
<p>For example, the following swagger file defines <code>Basic</code> and <code>Advanced</code> tags.</p>
<ol>
<li>Sections in the layout:
<ul>
<li><code>set_contacts</code> API is tagged with <code>Advanced</code> only, then it will only show inside <code>Advanced</code> tag section.</li>
<li><code>get_contacts</code> API is tagged with both <code>Basic</code> and <code>Advanced</code>, then it will show inside both of the tag sections.</li>
<li><code>delete_contacts</code> API is not tagged, it will show inside &quot;Other apis&quot; section.</li>
</ul>
</li>
<li>Bookmarks:
<ul>
<li>Bookmark of <code>Basic</code> tag is <code>BasicBookmark</code>, which is defined by <code>x-bookmark-id</code>.</li>
<li>Bookmark of <code>Advanced</code> tag is <code>Advanced</code>, which use <code>name</code> by default.</li>
</ul>
</li>
</ol>
<pre><code class="lang-json">{
  &quot;swagger&quot;: &quot;2.0&quot;,
  &quot;info&quot;: {
    &quot;title&quot;: &quot;Contacts&quot;,
    &quot;version&quot;: &quot;1.6&quot;
  },
  &quot;host&quot;: &quot;microsoft.com&quot;,
  &quot;basePath&quot;: &quot;/docfx&quot;,
  &quot;schemes&quot;: [
    &quot;https&quot;
  ],
  &quot;tags&quot;: [
    {
      &quot;name&quot;: &quot;Basic&quot;,
      &quot;x-bookmark-id&quot;: &quot;BasicBookmark&quot;,
      &quot;description&quot;: &quot;Basic description&quot;
    },
    {
      &quot;name&quot;: &quot;Advanced&quot;,
      &quot;description&quot;: &quot;Advanced description&quot;
    }
  ],
  &quot;paths&quot;: {
    &quot;/contacts&quot;: {
      &quot;get&quot;: {
        &quot;operationId&quot;: &quot;get_contacts&quot;,
        &quot;tags&quot;: [
          &quot;Basic&quot;,
          &quot;Advanced&quot;
        ]
      },      
      &quot;set&quot;: {
        &quot;operationId&quot;: &quot;set_contacts&quot;,
        &quot;tags&quot;: [
          &quot;Advanced&quot;
        ]
      },      
      &quot;delete&quot;: {
        &quot;operationId&quot;: &quot;delete_contacts&quot;
      }
    }
  }
}
</code></pre>
<p>For the example above, the simple html layout will be:</p>
<pre><code class="lang-html">&lt;h2 id=&quot;BasicBookmark&quot;&gt;Basic&lt;/h2&gt;
  &lt;h3 data-uid=&quot;microsoft.com/docfx/Contacts/1.6/get_contacts&quot;&gt;get_contacts&lt;/h3&gt;
&lt;h2 id=&quot;Advanced&quot;&gt;Advanced&lt;/h2&gt;
  &lt;h3 data-uid=&quot;microsoft.com/docfx/Contacts/1.6/get_contacts&quot;&gt;get_contacts&lt;/h3&gt;
  &lt;h3 data-uid=&quot;microsoft.com/docfx/Contacts/1.6/set_contacts&quot;&gt;set_contacts&lt;/h3&gt;
&lt;h2 id=&quot;other-apis&quot;&gt;Other APIs&lt;/h2&gt;
  &lt;h3 data-uid=&quot;microsoft.com/docfx/Contacts/1.6/delete_contacts&quot;&gt;delete_contacts&lt;/h3&gt;
</code></pre>
<h4 id="overwrite-the-tags">Overwrite the tags</h4>
<ol>
<li><p>More information could be added to the tag as following:</p>
<pre><code class="lang-md">---
uid: microsoft.com/docfx/Contacts/1.6/tag/Basic
---

Additional comments for `microsoft.com/docfx/Contacts/1.6/tag/Basic`

</code></pre>
</li>
<li><p>The <code>description</code> of the tag could be overwritten as following:</p>
<pre><code class="lang-md">---
uid: microsoft.com/docfx/Contacts/1.6/tag/Basic
description: *content
---

Overwrite description for `microsoft.com/docfx/Contacts/1.6/tag/Basic`

</code></pre>
</li>
</ol>
<h3 id="add-other-metadata">Add other metadata</h3>
<p>You can define your own metadata with YAML header. This functionality is quite useful when your own template is used.</p>
<p>When the key of the metadata is already preserved by DocFX, for example, <code>summary</code>, the value of <code>summary</code> will be overwritten. You can also overwrite complex types, for example, <code>description</code> of a <code>parameter</code>. Make sure the data structure of the provided metadata is consistent with the one defined in DocFX, otherwise, DocFX is unable to cast the value and fails.</p>
<p>When the key of the metadata is not preserved by DocFX, for example, <code>not_predefined</code>. The metadata is kept and can be used in the template.</p>
<h2 id="split-extensibility">Split extensibility</h2>
<p>By default, one <em>REST</em> API file generates one HTML file. For example, petstore.json generates petstore.html. We provide <code>rest.tagpage</code> and <code>rest.operationpage</code> plugins to split the original <em>REST</em> API page into smaller pages.</p>
<ol>
<li>With <code>rest.tagpage</code> plugin enabled, operations with the same tag are grouped into one page.</li>
<li>With <code>rest.operationpage</code> plugin enabled, each operation is splitted into single page.</li>
<li>With both <code>rest.tagpage</code> and <code>rest.operationpage</code> plugins enabled, the <em>REST</em> model will be splitted to tag level first, then split to operation level.</li>
</ol>
<p>Refer <a href="../templates-and-plugins/plugins-dashboard.html">Plugins dashboard</a> for more details.</p>
<div id="disqus_thread"></div>
                <script>
                (function() { // DON'T EDIT BELOW THIS LINE
                var d = document, s = d.createElement('script');
                s.src = 'https://docfx-github.disqus.com/embed.js';
                s.setAttribute('data-timestamp', +new Date());
                (d.head || d.body).appendChild(s);
                })();
                </script>
                <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
            </article>
          </div>
          
          <div class="hidden-sm col-md-2" role="complementary">
            <div class="sideaffix">
              <div class="contribution">
                <ul class="nav">
                  <li>
                    <a href="#disqus_thread" class="contribution-link">0 Comments</a>
                  </li>
                </ul>
              </div>
              <nav class="bs-docs-sidebar hidden-print hidden-xs hidden-sm affix" id="affix">
              <!-- <p><a class="back-to-top" href="#top">Back to top</a><p> -->
              </nav>
            </div>
          </div>
        </div>
      </div>
      
      <footer>
        <div class="grad-bottom"></div>
        <div class="footer">
          <div class="container">
            <span class="pull-right">
              <a href="#top">Back to top</a>
            </span>
            <span>Copyright © 2015-2018 Microsoft<br>Generated by <strong>DocFX</strong></span>
            
          </div>
        </div>
      </footer>
    </div>
    
    <script type="text/javascript" src="../styles/docfx.vendor.js"></script>
    <script type="text/javascript" src="../styles/docfx.js"></script>
    <script type="text/javascript" src="../styles/main.js"></script>
    <script id="dsq-count-scr" src="//docfx-github.disqus.com/count.js" async=""></script>
    
    <script>
      (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
      })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
    
      ga('create', 'UA-99241001-1', 'auto');
      ga('send', 'pageview');
    
    </script>
  </body>
</html>
